<template>
	<div>
		<!-- 面包屑实现导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{  path: '/adminHome'}">首页</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片实现数据列表展示-->
		<el-card class="box-card" style="margin-top: 1.25rem; width: 100%;">

			<!-- 搜索框和添加数据信息按钮 -->
			<el-row>
				<el-col :span="6">
					<div>
						<el-input placeholder="请输入内容" clearable v-model="queryInfo.roleName">
							<el-button slot="append" icon="el-icon-search" @click="queryAll"></el-button>
						</el-input>
					</div>
				</el-col>
				<el-button type="success" round @click="roleadd">添加</el-button>

			</el-row>

			<!-- 数据列表展示 -->
			<el-table :data="roleList" stripe style="width: 100%;margin-top: 2.5rem;" border>

				<el-table-column type="expand">
					<template slot-scope="scope">
						<el-row v-for="it in scope.row.powers"
							style="margin: 20px; border-bottom: 1px solid #DCDFE6;display:flex;align-items:center;">
							<el-col :span="6">
								<el-tag closable>{{it.name}}</el-tag>
								<i class="el-icon-caret-right"></i>
							</el-col>
							<el-col :span="18">
								<el-row v-for="itt in it.powers" style="margin: 20px;display:flex;align-items:center;">
									<el-col :span="8">
										<el-tag type="success" closable>{{itt.name}}</el-tag>
										<i class="el-icon-caret-right"></i>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</template>
				</el-table-column>

				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column prop="name" label="角色名称"> </el-table-column>


				<el-table-column label="操作">
					<template slot-scope="scope">
						<!-- {{scope.row.id}} -->
						<el-tooltip class="item" effect="light" content="修改" placement="top">
							<el-button type="primary" icon="el-icon-edit" size="mini" @click='selectrole(scope.row.id)'>
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="light" content="删除" placement="top">
							<el-button type="danger" icon="el-icon-delete" size="mini"
								@click="deleteRole(scope.row.id)"></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="light" content="分配权限" placement="top">
							<el-button type="warning" @click="fr(scope.row)" icon="el-icon-star-off" size="mini">
							</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="4"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>

		</el-card>


		<!-- 分配权限的对话框 -->
		<el-dialog title="分配角色" :visible.sync="powervisible">

			<el-tree :data="powersData" ref="treeRef" show-checkbox node-key="id" default-expand-all
				:default-checked-keys="checkeys" :props="defaultProps">

			</el-tree>


			<div slot="footer" class="dialog-footer">
				<el-button @click="quxiao">取 消</el-button>
				<el-button type="primary" @click="getnewPower">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 添加角色 -->
		<el-dialog title="添加角色" :visible.sync="roleaddvisible">

			<el-form :model="role" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="角色名" prop="name">
					<el-input type="text" v-model="role.name" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>


			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 修改 -->
		<el-dialog title="添加角色" :visible.sync="roleupdatavisible">

			<el-form :model="role1" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="角色名" prop="name">
					<el-input type="text" v-model="role1.name" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>


			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm1('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm1('ruleForm')">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				rules: {
					name: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 5,
							message: '长度在 1 到 5 个字符',
							trigger: 'blur'
						}
					]
				},
				powervisible: false,
				roleaddvisible: false,
				roleupdatavisible: false,

				// 数据验证

				queryInfo: {
					pageNum: 1,
					roleName: ''
				},
				role: {
					id: 0,
					name: ''
				},
				role1: {},
				total: 0,
				roleList: [],
				powersData: [],
				defaultProps: {
					children: 'powers',
					label: 'name'
				},
				checkeys: [],
				rid: 0
			}
		},
		mounted() {
			this.queryAll();
		},
		methods: {

			// 重置
			resetForm1(formName) {

				this.$refs[formName].resetFields();
				this.roleupdatavisible = false
			},
			// 提交
			submitForm1(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						var param = new URLSearchParams()
						param.append('id', this.role1.id)
						param.append('name', this.role1.name)

						var str = await this.$http.post('updateRoleById', param)
						if (str.data.code == 200) {
							this.$message('添加成功');
							this.roleupdatavisible = false
							this.queryAll();
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			// 重置
			resetForm(formName) {

				this.$refs[formName].resetFields();
				this.roleaddvisible = false
			},
			// 提交
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						var str = await this.$http.post('addRole?name=' + this.role.name)
						if (str.data.code == 200) {
							this.$message('添加成功');
							this.roleaddvisible = false
							this.queryAll();
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			//查询角色
			async selectrole(id) {
				var str = await this.$http.get('queryRoleById?roleId=' + id)
				this.role1 = str.data
				this.roleupdatavisible = true
			},

			//添加角色
			roleadd() {
				this.roleaddvisible = true
			},

			//删除角色
			deleteRole(id) {


				this.$confirm('确定删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var res = await this.$http.get('deleteRoleById?id=' + id)
					if (res.data.code == 100) {
						this.$message("有用户为此角色，不可删除")

					} else if (res.data.code == 200) {
						this.queryAll()
						this.$message({

							type: 'success',
							message: '删除成功!'
						});
					}else{
						this.$message.error("删除失败")
					}

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});



			},

			// 根据角色查询权限树形结构
			async fr(role) {

				//this.queryAll();
				this.rid = role.id;
				var res = await this.$http.get('queryRoleById?roleId=' + this.rid);
				role = res.data
				console.log(res.data)

				this.checkeys = [];

				this.powervisible = true;

				// 从接口中获取所有的权限，展示再树形结构中
				var res = await this.$http.post('queryPowerAllF')
				this.powersData = res.data;
				// 动态的获取当前角色中的所有的二级权限


				for (var i = 0; i < role.powers.length; i++) {

					var p = role.powers[i];
					if (p.powers.length == 0) {
						this.checkeys.push(p.id)
					}


					for (var j = 0; j < p.powers.length; j++) {
						var pp = p.powers[j];

						this.checkeys.push(pp.id);
					}
				}



			},
			// 查询所有的数据信息
			async queryAll() {
				var params = new URLSearchParams();
				params.append('roleName', this.queryInfo.roleName)
				params.append('pageNum', this.queryInfo.pageNum)
				var res = await this.$http.post('queryRoleAll', params)

				// 把查询后的结果赋值给 roleList
				this.roleList = res.data.list;
				// 把数据总条数赋值给 totle
				this.total = res.data.total;
			},
			// 分页查询
			handleCurrentChange(current) { // current 你要重新访问的页码
				this.queryInfo.pageNum = current;
				this.queryAll();
			},

			// 确定修改角色的权限
			async getnewPower() {
				//获取所有选中及半选的内容
				const keys = [
					...this.$refs.treeRef.getCheckedKeys(),
					...this.$refs.treeRef.getHalfCheckedKeys()
				]


				var param = new URLSearchParams();

				param.append('roleId', this.rid)
				param.append('str', keys)
				var i = await this.$http.post('updatePower', param)

				this.powervisible = false;
				this.queryAll();
			}, //分配权限界面隐藏
			quxiao() {
				this.powervisible = false
			}
		}
	}
</script>

<style>
</style>
